<template>
  <div class="userInfo">
    <el-row>
      <el-col :span="12">
        <div style="margin-bottom: 30px; font-size: 20px; font-weight: 600">
          个人信息
        </div>
        <el-form
          :model="userInfoForm"
          style="margin: 50px auto; padding: 0 20px"
          label-width="80px"
        >
          <el-form-item label="头像">
            <img
              v-if="userInfoForm.avatar"
              :src="userInfoForm.avatar"
              style="width: 100px; display: inline-block"
              class="avatar"
            >
            <el-upload
              class="avatar-uploader"
              style="margin-left: 20px; display: inline-block"
              action="http://114.132.200.186:10086/uploadFile"
              :show-file-list="true"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <el-link
                type="info"
              >上传图片<i
                class="el-icon-upload el-icon--right"
              /></el-link>
            </el-upload>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="userInfoForm.nickname" />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="userInfoForm.phone" />
          </el-form-item>
          <el-button
            type="primary"
            style="width: calc(100% - 80px); float: right"
            @click="updateAccountInfo"
          >修 改</el-button>
        </el-form>
      </el-col>
      <el-col :span="12">
        <div style="margin-bottom: 30px; font-size: 20px; font-weight: 600">
          孩子信息
        </div>
        <el-button
          type="success"
          style="margin-bottom: 10px"
          round
          @click="addChildForm = true"
        >
          <i class="el-icon-circle-plus-outline" />
          <span>添加孩子信息</span>
        </el-button>
        <el-table
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column
            align="center"
            label="孩子姓名"
            width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.childName }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="孩子性别"
            width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.childGender === 0 ? "男" : "女" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="孩子年龄"
            width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.childAge }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="created_at"
            label="操作"
            width="150"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="update(scope.$index)"
              >
                编 辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog
      title="编辑孩子信息"
      :visible.sync="showEdit"
      center
      width="500px"
    >
      <el-form
        :model="childForm"
        label-width="80px"
      >
        <el-form-item label="孩子姓名">
          <el-input v-model="childForm.childName" />
        </el-form-item>
        <el-form-item label="孩子性别">
          <el-radio-group v-model="childForm.childGender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="孩子年龄">
          <el-input v-model="childForm.childAge" />
          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button
              @click="showEdit = false"
            >取 消</el-button>
            <el-button
              type="primary"
              @click="updateChild"
            >确 定</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="showEdit = false">取 消</el-button>
        <el-button
          type="primary"
          @click="updateChild"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="添加孩子信息"
      :visible.sync="addChildForm"
      center
      width="500px"
    >
      <el-form
        :model="addForm"
        label-width="80px"
      >
        <el-form-item label="孩子姓名">
          <el-input v-model="addForm.childName" />
        </el-form-item>
        <el-form-item label="孩子性别">
          <el-radio-group v-model="addForm.childGender">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="
              孩子年龄"
        >
          <el-input v-model="addForm.childAge" />
        </el-form-item></el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="addChildForm = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addChild"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addChild, updateChild, getChildren } from "@/api/child";
import {Message} from "element-ui";
import { updateAccount} from "@/api/account";
import { getInfo} from "@/api/user";

export default {
  data() {
    return {
      userInfoForm: {
        nickname: "林荝诗",
        phone: "13324567890",
        avatar:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp433908581.jpg&refer=http%3A%2F%2Fimg2.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651933787&t=d16012ff3d432116c8dee4bd9c568a4a",
      },
      childForm: {
        childName: "林蛋蛋",
        childAge: "10",
        childGender: "1",
      },
      addForm: {
        childName: "",
        childAge: "",
        childGender: "",
      },
      list: [],
      showEdit: false,
      addChildForm: false,
    };
  },
  created() {
    this.fetchData();
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      getInfo().then(response => {
        this.userInfoForm = response.data;
      });
    },
    update(index) {
      this.childForm = this.list[index];
      this.showEdit = true;
    },
    updateChild() {
      updateChild(this.childForm).then(response => {
        if (response.success === "1") {
          this.showEdit = false;
          this.fetchData();
          Message.success(response.message);
        }
      });
    },
    updateAccountInfo() {
      updateAccount(this.userInfoForm).then(response => {
        if (response.success === "1") {
          Message.success(response.message);
          window.location.reload();
        }
      });
    },
    fetchData() {
      getChildren().then(response => {
        console.log(response);
        this.list = response.data;
      });
    },
    addChild() {
      console.log("add child");
      addChild({...this.addForm}).then(response => {
        if (response.success === "1") {
          this.addChildForm = false;
          this.fetchData();
          Message.success(response.message);
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.userInfoForm.avatar = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style lang="scss" scoped>
.userInfo {
  padding: 20px;
}
</style>
